<template>
  <div class="app-container calendar-list-container">
    <div v-if="!opShow">
      <buttons :showQuery="false" :showBack="true" @query="doQuery" :list="btnList" :disabled="disabled" placeholder="菜单名称" :permissions="permissions" @add="doAdd" @edit="doEdit"
        @view="doView" @delete="doDelete" @open="doOpen" @close="doClose" @btn="doBtn"></buttons>
      <grid :columns="columns" :multi="true" :url="queryUrl" ref="mainGrid" height="auto" diffHeight="0" @change="rowCilck" method="post" :queryEntity="{code: appCode}"
        :pagination="false" rowKey="menuCode" :indexNo="false"></grid>
    </div>
    <op ref="op" :visible="opShow" @cancel="cancel"></op>
  </div>
</template>

<script>
import request from '@/router/axios'
import url from '@/const/apiURL'
import grid from '@/components/TreeGrid'
import buttons from '@/components/Buttons'
import op from './op'
import { Message, MessageBox } from 'element-ui'
import { initMenu } from "@/util/util";
import { resolveUrlPath } from "@/util/util";
import { MenuTypeFormatter, YesOrNoFormatter } from '@/const/dict'
import { mapGetters } from 'vuex'

export default {
  components: { grid, buttons, op },
  data () {
    return {
      queryUrl: url.MENU_APP_TREE_URL,
      disabled: true,
      opShow: false,
      appCode: null,
      columns: [
        // { label: '树节点', width: 120, prop: 'children', align: 'left', template: 'tree' },
        { label: '菜单名称', width: 300, prop: 'menuName', align: 'left' },
        { label: '权限编码', width: 180, prop: 'permission', align: 'left' },
        // { label: '前端请求', Width: 100, prop: 'menuUrl', align: 'left' },
        //  { label: '组件', Width: 100, prop: 'component', align: 'left' },
        { label: '图标', width: 50, prop: 'icon', align: 'center', template: 'icon' },
        { label: '类型', width: 80, prop: 'menuType', align: 'center', formatter: MenuTypeFormatter, template: 'bgColor', bgColor: { 'BTN': 'orange', 'MENU': 'green' } },
        { label: '排序', width: 80, prop: 'indexSort', align: 'center' },
        { label: '是否缓存', width: 80, prop: 'cache', align: 'center', formatter: YesOrNoFormatter },
        { label: '是否启用', width: 80, prop: 'status', align: 'center', formatter: YesOrNoFormatter },
        { label: '创建人', width: 100, prop: 'createUserName', align: 'center' },
        { label: '创建时间', width: 100, prop: 'createTime', align: 'center' }
      ],
      btnList: [
        { name: '新增', type: 'primary', icon: 'edit', click: 'add', auth: 'menu_add', ctr: false },
        { name: '编辑', type: 'primary', icon: 'edit', click: 'edit', auth: 'menu_edit', ctr: true },
        { name: '查看', type: 'primary', icon: 'edit', click: 'view', auth: 'menu_view', ctr: true },
        { name: '删除', type: 'primary', icon: 'edit', click: 'delete', auth: 'menu_delete', ctr: true, confirm: true },
        { name: '开启', type: 'primary', icon: 'edit', click: 'open', auth: 'menu_open', ctr: true, confirm: true },
        { name: '关闭', type: 'primary', icon: 'edit', click: 'close', auth: 'menu_close', ctr: true, confirm: true },
        { name: '按钮', type: 'primary', icon: 'edit', click: 'btn', auth: 'menu_btn', ctr: true, confirm: false },
      ]
    }
  },
  computed: {
    ...mapGetters([
      'permissions'
    ])
  },
  created () {
    this.appCode = this.$route.query.appCode
  },
  methods: {
    doAdd () {
      this.opShow = true
      const row = this.$refs['mainGrid'].getCurrentRow()
      let parentMenuCode = '0'
      let parentMenuName = '根节点'
      if (row) {
        parentMenuCode = row.menuCode
        parentMenuName = row.menuName
      }
      this.$refs['op'].init('新增', { appCode: this.appCode, parentMenuCode: parentMenuCode, parentMenuName: parentMenuName }, false, url.MENU_ADD_URL)
    },
    doEdit () {
      const row = this.$refs.mainGrid.getSelectOne()
      if (row) {
        this.viewOp(row.menuCode).then((data) => {
          this.opShow = true
          this.$refs['op'].init('编辑', data, false, url.MENU_EDIT_URL)
        })
      }

    },
    doView () {
      const row = this.$refs.mainGrid.getSelectOne()
      if (row) {
        this.viewOp(row.menuCode).then((data) => {
          this.opShow = true
          this.$refs['op'].init('查看', data, true)
        })
      }
    },
    doDelete () {
      const row = this.$refs.mainGrid.getSelectOne()
      if (row) {
        MessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 删除数据
          this.deleteOp(row.menuCode).then((data) => {
            if (data) {
              this.$refs['mainGrid'].reload()
            }
          })
        })
      }
    },
    doQuery (text) {
      this.$refs['mainGrid'].doQuery(text)
    },
    rowCilck (row) {
      this.disabled = row.length == 0
    },
    cancel () {
      this.opShow = false
    },
    btnOp (code) {
      return request({
        url: url.MENU_BTN_URL,
        method: 'post',
        data: { 'key': 'key' },
        params: { 'menuCode': code }
      })
    },
    openOp (code) {
      return request({
        url: url.MENU_OPEN_URL,
        method: 'post',
        data: { 'key': 'key' },
        params: { 'menuCode': code }
      })
    },
    closeOp (code) {
      return request({
        url: url.MENU_CLOSE_URL,
        method: 'post',
        data: { 'key': 'key' },
        params: { 'menuCode': code }
      })
    },
    doOpen () {
      const row = this.$refs.mainGrid.getSelectOne()
      if (row) {
        this.openOp(row.menuCode).then((data) => {
          if (data) {
            this.$refs['mainGrid'].reload()
          }
        })
      }
    },
    doClose () {
      const row = this.$refs.mainGrid.getSelectOne()
      if (row) {
        this.closeOp(row.menuCode).then((data) => {
          if (data) {
            this.$refs['mainGrid'].reload()
          }
        })
      }
    },
    doBtn () {
      const row = this.$refs.mainGrid.getSelectOne()
      if (row) {
        this.btnOp(row.menuCode).then((data) => {
          if (data) {
            MessageBox.alert("生成成功")
          }
        })
      }
    },
    deleteOp (menuCode) {
      return request({
        url: url.MENU_DELETE_URL,
        method: 'post',
        params: { menuCode },
        data: { menuCode }
      })
    },
    viewOp (menuCode) {
      return request({
        url: url.MENU_VIEW_URL,
        method: 'post',
        params: { menuCode },
        data: { menuCode }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
